<template>
    <div  v-for="o in  props.weiboRecords"   class="wb_box">
        <div class="wb_head">
            <el-row>
                    <el-col :span="3">
                        <div style="text-align: left" @click="goToUser(o.userInfo.userId)">
                            <img :src="o.userInfo.avatar? o.userInfo.avatar : avatarImg" style="width: 100%;border-radius:100%;">
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div   class="wb_nick_name" @click="goToUser(o.userInfo.userId)">
                            {{ o.userInfo.nickName? o.userInfo.nickName: o.userInfo.username}}
                        </div>
                        <div  class="wb_time" >
                            {{ o.wbInfo.createTime}}
                        </div>
                    </el-col>
                <el-col :span="9">

                </el-col>
                <el-col :span="2">
                    <div style="text-align: right" v-if="o.userInfo.userId == props.userId" @click = "showMoreInfo(o.wbInfo.id)">
                        <img :src="moreImg" style="width: 100%;">
                    </div>
                </el-col>
            </el-row>

        </div>
        <div class="wb_content">
            <p style="margin-bottom: 10px">{{ o.wbInfo.wbContent}}</p>
             <Thumbnail :file_data = "o.wbFileAll"></Thumbnail>
        </div>
        <div v-if="props.bottomShow == 'wblist' " class="wb_buttom">
<!--                <div  class="wb_interactive" @click="gotoComm(o)">-->
<!--                    <img style="width: 100%;" src="../assets/img/command.png" alt="">-->
<!--                </div>-->
<!--                <div  class="wb_interactive_font"  @click="gotoComm(o)">-->
<!--                  123-->
<!--                </div>-->
<!--                <div  class="wb_interactive"  @click="goodJob(o.wbInfo.id)">-->
<!--                    <img style="width: 100%;" :src="goodImg" alt="">-->
<!--                </div>-->
<!--                <div  class="wb_interactive_font" @click="goodJob(o.wbInfo.id)" >-->
<!--                    123-->
<!--                </div>-->
        </div>
        <div v-if="props.bottomShow == 'commit' "  class="wb_buttom_com">
            <div class="com_tag ">
                <p>评论</p>
                <p>点赞</p>
            </div>

        </div>
    </div>


    <el-divider><span style="color:#9e9e9e">end</span></el-divider>
    <div style="height: 200px" v-show="props.weiboRecords.length == 0"></div>
</template>

<script setup>

import avatarImg from "@/assets/img/panda.png";
import moreImg from "@/assets/img/more.png";
import goodImg from "@/assets/img/good.png";
import Thumbnail from "@/components/thumbnail.vue";
import {onMounted, reactive} from "vue";
import {useRouter,useRoute} from 'vue-router'


const props = defineProps({
    "weiboRecords":Array,
    "bottomShow":String,
    "userId":String
})


const router = useRouter();

const goToUser= (userId) =>{
    console.log(userId)
}
const goodJob =(wbId) =>{
    console.log(wbId)
}
const gotoComm =(wbInfo) =>{
    console.log(wbInfo)
    router.push({name:"wbdetail", params:  {wbInfo: JSON.stringify(wbInfo)}})
}
const more = defineEmits(['showMore'])

const showMoreInfo = (wbId)=>{
    more("showMore", wbId)
}

onMounted(()=>{
    document.getElementsByClassName("el-divider__text")[0].style.backgroundColor = "#ECECEC"

})

</script>

<style scoped>


.wb_nick_name{
    text-align: left;line-height: 22px;padding-left: 5px;
    color: #ffa61f ;
    font-size: 16px;
}
.wb_box{
    margin-top: 10px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.wb_head{
    padding: 12px 8px 0px ;
}
.wb_time{
    line-height: 20px; padding-left: 5px;color: #9e9e9e;
    font-size: 14px;
}
.wb_content{
    padding: 12px 8px ;
    color: #787878;
    font-size: 18px;
    word-wrap: break-word;
}
.wb_buttom{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wb_interactive{
    width: 22px;
}
.wb_interactive_font{
    display: inline-block;
    margin-right: 12px;
    color:  #9e9e9e;
}
/*.wb_buttom_com{*/
/*    border-top:1px #dcdfe6 solid;*/
/*}*/
.com_tag{
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #787878;
    font-size: 15px;
}
</style>